<template>
    <div class="header">
        <div :class="['tab', { 'active': tabIndex == 0 }]" @click="tabIndex = 0">直播间</div>
        <div :class="['tab', { 'active': tabIndex == 1 }]" @click="tabIndex = 1">克隆室</div>
    </div>
    <div class="live-room">
        <div class="room-item first-item">
            <el-button @click="toAddroom">AI一键开播</el-button>
        </div>
        <div class="room-item">
            <div class="left">
                <img :src="imgSrc" width="150px" height="100%" alt="">
            </div>
            <div class="right">
                <el-row justify="space-between" align="middle">
                    <el-tag round>抖音</el-tag>
                    <el-icon><Delete /></el-icon>
                </el-row>
                <div class="name">乔乔化妆品带货</div>
                <div class="time">上次直播时长</div>
                <div class="time">历史直播时长</div>
                <div class="type">直播类型：数字人直播</div>
                <el-button type="primary" size="small" @click="toLivePage">进入直播间</el-button>
            </div>
        </div>
        <!-- <el-button @click="toDigitalHuman">数字人页面</el-button> -->
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { Delete } from '@element-plus/icons-vue'
import imgSrc from '@/assets/image.png'

const tabIndex = ref(0)
const router = useRouter();
const toAddroom = () => {
    console.log('toAddroom', router);
    router.push({ name: 'AddLiveRooms'})
}

const toLivePage = () => {
    router.push({ name: 'LiveRoomSet'})
}
// const toDigitalHuman = () => {
//     router.push({ name: 'DigitalHuman'})
// }
</script>

<style lang="less" scoped>

.header{
    width: 100%;
    height: 50px;
    background-color: @bg-default;
    color: @font-color-default;
    display: flex;
    align-items: center;
    padding-left: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;

    .tab{
        margin-right: 20px;
        cursor: pointer;

        &.active{
            color: @color-white;
        }
    }
}

.live-room{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;

    .room-item{
        display: flex;
        color: @color-white;
        background: @bg-default;
        padding:10px;
        height: 200px;
        font-size: 12px;
        .left{
            margin-right: 10px;
        }

        .right{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .name{
                margin:20px 0;
                
            }
            .type{
                margin-top:20px;
            }
        }
    }

    .first-item{
        justify-content: center;
        align-items: center;
    }

    
}
</style>